<template>
  <a-modal :title="title" v-model:open="open" :confirm-loading="loading" @ok="handleOk">
    <a-form :label-col="{span:5}" :wrapper-col="{span:18}" :model="form" :rules="rules" ref="formRef">
      <a-form-item label="角色名称" name="name">
        <a-input placeholder="输入角色名称" v-model:value="form.name" show-count :maxlength="8"/>
      </a-form-item>
      <a-form-item label="角色标识" name="slug" help="角色标识只能是字母、数字、下划线、中划线">
        <a-input placeholder="输入角色标识" v-model:value="form.slug" show-count :maxlength="20"/>
      </a-form-item>
      <form-item label="标签样式" :col="[5,18]" class="margin-bottom">
        <tag-select v-model:value="form.color"/>
      </form-item>
      <a-form-item label="角色描述" name="description">
        <a-textarea placeholder="输入角色描述,20字以内" v-model:value="form.description" show-count :maxlength="20"/>
      </a-form-item>
     <form-item :col="[5,18]" label="状态">
       <a-switch v-model:checked="form.status"
                 checked-children="启用"
                 un-checked-children="禁用"
                 :checkedValue="1"
                 :unCheckedValue="0"/>
     </form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {computed, type PropType, reactive, ref,watch} from "vue";
import FormItem from "@/components/FormItem.vue";
import type {FormInstance} from "ant-design-vue";
import {useRoleStore} from "@/store/modules/organization/role.ts";
import TagSelect from "@/components/TagSelect.vue";
import {useOrgStore} from "@/store/modules/organization";

const store = useRoleStore(),orgStore = useOrgStore()
const open = defineModel<boolean>('open', {default: false})
const loading = ref<boolean>(false)
const props = defineProps({
  formData: {
    type: Object as PropType<PermissionRole>,
    default: ()=>({})
  }
})
const title = computed(()=> props.formData.id ? '编辑角色' : '新增角色')
const formRef = ref<FormInstance>()
const form = reactive<PermissionRoleForm>({
  id: 0,
  name: '',
  description: '',
  oid: orgStore.id,
  color:'',
  slug:'',
  status: 1
})
const rules = {
  name: [
    {required: true, message: '请输入角色名称'},
    {min: 2, max: 8, message: '角色名称长度限制2-8个字'}
  ],
  slug: [
    {required: true, message: '请输入角色标识'},
    {min: 2, max: 20, message: '角色标识长度限制2-20个字'},
    {pattern: /^[a-zA-Z0-9_-]+$/, message: '角色标识只能是字母、数字、下划线、中划线'}
  ],
  description: [
    {min: 2, max: 20, message: '角色描述长度限制2-20个字'}
  ]
}
watch(()=> props.formData, (val)=>{
  if (val.id){
    Object.assign(form,val)
  }else {
    Object.assign(form,{
      id: 0,
      oid: orgStore.id,
      name: '',
      description: '',
      color:'',
      slug:'',
      status: 1
    })
  }
}, {deep: true})
const handleOk = async () => {
  try {
    loading.value = true
    await formRef.value?.validate()
    let res:boolean;
    if(form.id){
      res = await store.update(form)
    }else {
      res = await store.create(form)
    }
    if (res){
      open.value = false
    }
  }catch{}
  finally {
    setTimeout(()=>loading.value = false,3000)
  }
}
</script>

<style scoped>

</style>